import 'package:dark_notes/models/settingsmodel.dart';
import 'package:dark_notes/widgets/customdrawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:provider/provider.dart';

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('设置')),
        drawer: CustomDrawer(),
        body: ListView(
          children: <Widget>[
            ListTile(
              title: Text('头部颜色'),
              subtitle: Text(
                '头部主题色',
                style: TextStyle(
                  fontSize: 12,
                ),
              ),
              trailing: GestureDetector(
                  child: Container(
                    width: 25,
                    height: 25,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                  onTap: () {
                    showDialog(
                      context: context,
                      child: CustomDialog(title: '头部颜色', whichColor: 'primary'),
                    );
                  }),
            ),
            Divider(
              height: 4,
              thickness: 2,
            ),
            ListTile(
              title: Text('按钮颜色'),
              subtitle: Text(
                '替换按钮颜色',
                style: TextStyle(
                  fontSize: 12,
                ),
              ),
              trailing: GestureDetector(
                  child: Container(
                    width: 25,
                    height: 25,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Theme.of(context).accentColor,
                    ),
                  ),
                  onTap: () {
                    showDialog(
                      context: context,
                      child: CustomDialog(title: '按钮颜色', whichColor: 'accent'),
                    );
                  }),
            ),
            Divider(
              height: 4,
              thickness: 2,
            ),
            ListTile(
              title: Text('暗黑主题'),
              trailing: Consumer<SettingsModel>(
                builder: (context, settings, child) {
                  return Switch(
                    value: settings.isDarkTheme,
                    onChanged: (value) {
                      settings.changeTheme(value);
                    },
                    activeTrackColor: Theme.of(context).accentColor,
                    activeColor: Colors.white,
                  );
                },
              ),
            ),
            Divider(
              height: 4,
              thickness: 2,
            ),
          ],
        ));
  }
}

class CustomDialog extends StatefulWidget {
  final String title;
  final String whichColor;
  CustomDialog({this.title, this.whichColor});

  @override
  _CustomDialogState createState() => _CustomDialogState();
}

class _CustomDialogState extends State<CustomDialog> {
  Color newColor;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (widget.whichColor == 'primary') {
      newColor = Theme.of(context).primaryColor;
    } else if (widget.whichColor == 'accent') {
      newColor = Theme.of(context).accentColor;
    }
  }

  @override
  void dispose() {
    super.dispose();
    newColor = null;
  }

  void changeColor(Color color) {
    setState(() => newColor = color);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.title),
      content: SingleChildScrollView(
          child: ColorPicker(
        pickerColor: newColor,
        onColorChanged: (Color color) {
          changeColor(color);
        },
      )),
      actions: <Widget>[
        FlatButton(
          child: Text('确定'),
          onPressed: () {
            if (widget.whichColor == 'primary') {
              Provider.of<SettingsModel>(context, listen: false)
                  .changePrimary(this.newColor);
            } else if (widget.whichColor == 'accent') {
              Provider.of<SettingsModel>(context, listen: false)
                  .changeAccent(this.newColor);
            }
            Navigator.pop(context);
          },
        )
      ],
    );
  }
}
